import Link from 'next/link';
import { skills, skillCategories, radarSkills } from './data';
import SkillRadarChart from '../components/SkillRadarChart';
import SkillBars from '../components/SkillBars';

export const metadata = {
  title: '专业技能 | 余莉莎',
  description: '余莉莎的专业技能展示，涵盖数据安全、软件开发、教育技术、财务管理等多个领域',
};

export default function SkillsPage() {
  return (
    <div className="min-h-screen py-16">
      <div className="container mx-auto px-4">
        <h1 className="text-4xl font-bold text-primary-600 mb-2 text-center">专业技能</h1>
        <p className="text-xl text-gray-600 mb-12 text-center max-w-3xl mx-auto">
          在多个领域积累的专业能力和技术水平，为不同的项目提供全面解决方案
        </p>

        {/* 雷达图区域 */}
        <div className="bg-white rounded-xl shadow-md p-6 mb-16 max-w-4xl mx-auto">
          <h2 className="text-2xl font-semibold text-gray-800 mb-6 border-l-4 border-primary-500 pl-3">
            核心能力概览
          </h2>
          <div className="flex flex-col md:flex-row items-center justify-between">
            <div className="md:w-1/2 mb-8 md:mb-0 flex justify-center">
              <SkillRadarChart skills={radarSkills} width={300} height={300} />
            </div>
            <div className="md:w-1/2 md:pl-8">
              <p className="text-gray-700 mb-4">
                我的职业生涯跨越了多个领域，积累了广泛而深入的专业技能。雷达图展示了我在各核心领域的能力水平，全面呈现我的专业优势和技术特长。
              </p>
              <p className="text-gray-700">
                这种多元化的技能组合使我能够从不同角度思考问题，为客户提供创新且全面的解决方案。无论是技术实现、管理咨询还是教育培训，我都能够胜任并提供高质量的专业服务。
              </p>
            </div>
          </div>
        </div>
        
        {/* 技能详情区域 */}
        <div className="max-w-4xl mx-auto">
          <h2 className="text-2xl font-semibold text-gray-800 mb-8 border-l-4 border-primary-500 pl-3">
            详细技能分析
          </h2>
          
          <SkillBars skills={skills} categories={skillCategories} className="mb-12" />
          
          <div className="bg-gray-50 rounded-lg p-6 border-l-4 border-primary-500">
            <p className="text-gray-700 mb-4">
              <strong className="text-primary-600">不断学习与成长：</strong> 我始终保持对新知识和技术的热情，定期参加专业培训和研讨会，确保自己的技能始终处于行业前沿。
            </p>
            <p className="text-gray-700">
              <strong className="text-primary-600">技能应用：</strong> 这些技能不仅是理论上的掌握，更重要的是我已经在众多实际项目中成功应用，帮助客户解决了各种复杂问题，创造了实际价值。
            </p>
          </div>
        </div>
        
        {/* CTA部分 */}
        <div className="text-center mt-16">
          <p className="text-gray-600 mb-4">希望了解我如何将这些技能应用于实际项目？</p>
          <div className="flex flex-wrap justify-center gap-4">
            <Link href="/projects" className="btn-primary">
              查看项目案例
            </Link>
            <Link href="/career" className="btn-secondary">
              查看职业经历
            </Link>
            <Link href="/#contact" className="btn-secondary">
              联系我
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
} 